<template>
  <view class="container">
    <uni-list>
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
    </uni-list>
  </view>
</template>

<script setup>
import { onMounted, reactive } from "vue"
import { getUserProfile } from "@/api/system/user"

const user = reactive({ 
  nickName: "",
  phonenumber: "",
  email: "",
  createTime: ""
});
const roleGroup = reactive("");
const postGroup = reactive("");

onMounted(async () => {
  try {
    const response = await getUserProfile();
    // 假设响应数据结构包含 user、roleGroup 和 postGroup
    const { data } = response;
    // 更新 user 对象
    user.nickName = data.user.nickName;
    user.phonenumber = data.user.phonenumber;
    user.email = data.user.email;
    user.createTime = data.user.createTime;
    // 更新 roleGroup 和 postGroup
    roleGroup.value = data.roleGroup;
    postGroup.value = data.postGroup;
  } catch (error) {
    console.error("获取用户信息失败:", error);
  }
});

</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }
</style>
